{% extends "base.html" %}
{% block title %}Dashboards{% endblock title %}
{% block content_class %}class="data-rows"{% endblock content_class %}
{% block breadcrumb %}
<ul class="buttons">
    <li><a class='button create-dashboard' href="{% url 'create_dashboard' %}">Create Dashboard</a></li>
</ul>
{% endblock breadcrumb %}
{% block content %}
{% if dashboards_data|length > 0 %}
<table class='dashboard-table'>
    <thead>
        <tr>
            <th class='name'>Name</th>
            <th class='metrics'>Metrics</th>
            <th class="shared">Public URL</th>
            <th class='settings'></th>
        </tr>
    </thead>
    {% for dashboard in dashboards_data %}
    {% set d = dashboard.dashboard %}
    {% set metrics = dashboard.metrics %}
    <tr id="row-{{ d|mongo_id }}">
        <td><a href="{% url 'view_dashboard' dashboard_id=d|mongo_id %}">{{ d.name|default:"Untitled dashboard" }}</a></td>
        <td>

        
        
        {% if metrics.app_metrics|length > 0  %}
            <div class="metrics_block">
            <span class="title">App Metrics</span>
            <ul class='table__list'><li>
            {% for value in metrics.app_metrics %}
                <span class="values">{{value.name }}</span>
                
            {% endfor %}
            </li></ul>
            </div>
        {% endif %}

        {% if metrics.global_metrics|length > 0  %}
            <div class="metrics_block">
            <span class="title">Global Metrics</span>
            <ul class='table__list'><li>
            {% for value in metrics.global_metrics %}
                <span class="values">{{value.name }}</span>
                
            {% endfor %}
            </li></ul>
            </div>
        {% endif %}
        
        
        {% if metrics.server_metrics|length > 0 %}
        <div class="metrics_block">
            <span class="title purple">Server Metrics</span>
        <ul class='table__list'>
           {% for key, values in metrics.server_metrics.items  %}
             {% if values.name %}
                 
             
            <li><span class='server'>{{ values.name }}</span>
            {% for m in values.metrics %}<span class="values">{{m.name }}</span>  {% endfor %}</li>
                {% endif %}    
            {% endfor %}
            
        </ul>
        </div>
        {% endif %}


        </td>
        <td>{% if d.shared %}
        <a href="{% url 'public_dashboard' account_id=request.account_id dashboard_id=d|mongo_id %}">
            View</a> {% else %}-{% endif %}</td>
        <td class='settings-column'>
        
            <a href="#" class='settings amon' data-dropdown="settings-menu-{{ d|mongo_id }}" data-options="is_hover:true">d</a>
            <ul id='settings-menu-{{ d|mongo_id }}' class="f-dropdown tiny settings-menu" data-dropdown-content>
                
                <li>
                    <a  href="{% url 'edit_dashboard' dashboard_id=d|mongo_id %}" data-icon="e">Edit</a>
                </li>
                <li>
                    <a  href="{% url 'reorder_dashboard' dashboard_id=d|mongo_id %}" data-icon="8">Reorder</a>
                </li>
                <li>
                    <a data-rowid="{{ d|mongo_id }}" class='delete_row' data-icon="b" href="#">Delete</a>
                </li>
            </ul>
        </td>
    
    </tr>
    <div class="delete-row" id="delete-row-{{ d|mongo_id }}">
        <p>Are you sure you want to delete this dashboard ?</p>
        <ul>
            <li><a href="{% url 'delete_dashboard' dashboard_id=d|mongo_id %}" class="button delete">Delete</a></li>
            <li><a data-rowid="{{ d|mongo_id }}" href="" class="button cancel cancel_delete">Cancel</a></li>
        </ul>
    </div>
    {% endfor %}
</table>
{% else %} {# Dashboards data #}


    <div class="welcome">
        <div class="center">
            <span class="icon" data-icon="B"></span>
            <p>
                With dashboards you can group metrics from different servers into one view the way it makes most sense for your workflow. 
                <br><br>
                As an example you can create a Dashboard for your Rails app including CPU/Memory usage for your ruby processes, 
                your MySQL connections and requests per second for your nginx server. 
                <br><br>To get started click the <a href="{% url 'create_dashboard' %}">Create Dashboard</a> link.

            </p>
            

        </div>
    </div>
{% endif %}


    
{% endblock content %}
{% block js %}
    <script type="text/javascript" src='{{ STATIC_URL }}js/delete.row.js'></script>
{% endblock js %}